<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html><!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-row">

</div>

<table id="role" lay-filter="test"></table>
<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="../../layui/layui.js"></script>
<script>
    layui.use(['table','form','jquery'],function(){
        var table = layui.table;
        var form = layui.form;
        //第一个实例
        table.render({
            elem: '#role'
            ,id:"test"
            ,height: 'full'
            ,url: '/api/admin/getRoleList' //数据接口
            ,page: true //开启分页
            ,parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data//解析数据列表
                };
            }
            ,request: {
                pageName: 'current' //页码的参数名称，默认：page
                ,limitName: 'size' //每页数据量的参数名，默认：limit
            }
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:"10%", sort: true, fixed: 'left'}
                ,{field: 'name', title: '角色名', align:'center',width:"20%"}
                ,{field:'nums',title:'数量',align:'center', width:"20%"}
                ,{field: 'tips', title: '注释说明',align:'center', width:"20%", sort: true}
            ]]
        });

        // svar temp = table.checkStatus('test');
        // alert(temp.data);
    });
</script>
</body>
</html>